<template>
  <div class="box">
    <div class="Elastic">
      <div class="header">
        <span>{{headers}}外部地区</span>
      </div>
      <div class="ipts">
        <el-form label-position="left" label-width="120px">
          <el-form-item label="对接公司">
            <el-select v-model="formInline.companyName" placeholder="请选择对接公司">
              <el-option v-for="(item,index) in citys" :label="item" :value="item" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="外部地区名称">
            <el-input v-model="formInline.regionName" placeholder="请输入名称" maxlength="20"></el-input>
          </el-form-item>
          <div class="btns">
            <el-button type="primary" @click="addCity">发布</el-button>
            <el-button type="primary" @click="cancel">取消</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    headers: {
      type: String,
      default: null
    },
    current: {
      type: Object,
      default: {}
    },
    getdata: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      citys: ["珠江投资"],
      formInline: {
        regionName: this.current ? this.current.regionName : "",
        companyName: this.current == {} ? this.current.companyName : "珠江投资"
      }
    };
  },
  methods: {
    cancel() {
      this.$emit("listenToChildEvent", false);
    },
    addCity() {
      let regionName = this.formInline.regionName.replace(/\s*/g, "");
      if (
        this.current.regionName &&
        this.current.companyName &&
        this.current.id&&
        regionName.length>0
      ) {
        //更新外部区域信息
        this.$axios
          .post("/commission/externalRegion/update", {
            regionName: regionName,
            companyName: this.formInline.companyName,
            id: this.current.id
          })
          .then(res => {
            this.$emit("listenToChildEvent", false);
            this.$emit("getlist");
          });
      } else if (regionName && this.formInline.companyName&& regionName.length>0) {
        //  保存外部区域信息
        this.$axios
          .post("/commission/externalRegion/save", {
            regionName: regionName,
            companyName: this.formInline.companyName
          })
          .then(res => {
            this.$emit("listenToChildEvent", false);
            this.$emit("getlist");
          });
      } else {
        alert("请输入内容，在进行发布");
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.box {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0.2, 0.2, 0.2, 0.2);
  z-index: 999;

  .Elastic {
    border-radius: 10px;
    width: 500px;
    height: 300px;
    background: white;
    margin: 300px auto 0;

    .header {
      border-radius: 10px 10px 0 0;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #eeeeee;

      span {
        width: 100px;
        margin-left: 30px;
        height: 100%;
        display: block;
        border-bottom: 2px solid blue;
      }
    }
  }

  .ipts {
    margin: 40px 0 0 20px;

    .el-select, .el-input {
      width: 300px;
    }
  }

  .btns {
    display: flex;
    justify-content: center;
    align-items: center;

    button {
      wdiht: 20%;
      margin: 0 30px;
    }
  }
}
</style>